<template>
  <div class="container">
    <h1 class="topTitle">自动聚合</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">
         <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-layer-group ref="marker_features"
                       layer-type="overlay"
                       name="标记点集合">
          <v-marker-cluster ref="clusterRef" :options="marker_cluster_options">

            <l-marker
                    style="position: relative;"
                    v-for="(marker,index) in markers"
                    :key="marker.index"
                    :visible="marker.visible"
                    :draggable="marker.draggable"
                    :lat-lng.sync="marker.position"
                    @click="markerClick(marker.id , $event)"
            >
              <l-icon :icon-size="marker.icon.iconSize" :icon-url="marker.icon.iconUrl"
                      :icon-anchor="marker.icon.iconAnchor"
                      :shadow-size="marker.icon.shadowSize" :shadow-url="marker.icon.shadowUrl"
                      :shadow-anchor="marker.icon.shadowAnchor"
                      :popup-anchor="marker.icon.popupAnchor"/>
              <l-popup v-if="marker.tooltip!=''" :content="marker.tooltip"></l-popup>
            </l-marker>
          </v-marker-cluster>
        </l-layer-group>

        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>
  function rand(n) {
    // let max = n + 0.0625
    let min = n - 0.0625
    return Math.random() * 0.125 + min;
  }
  import * as L from "leaflet";
  import {latLng} from "leaflet";

  export default {
  name: "FlyLayerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      //点相关
      markers: [
        {
          position: { lat: 39.92, lng: 116.46 },
          tooltip: "<font color='red'>红色</font>",
          draggable: true,
          visible: true,
          icon:{
            iconUrl: "https://lbsyun.baidu.com/jsdemo/img/car.png",
            iconSize: [20, 20],
          }
        },
      ],
      marker_cluster_options:{singleMarkerMode:true,maxClusterRadius:50,spiderLegPolylineOptions: {opacity: 0} },
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject

      for (let i = 0; i < 100; i++) {
        this.markers.push({
          id: i,
          position: { lat: rand(39.92), lng:rand(116.46) },
          text: 'Hola ' + i,
          icon:{
            iconUrl: "https://lbsyun.baidu.com/jsdemo/img/car.png",
            iconSize: [20, 20],
          }
        })
      }


    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>